<template>
    <div>

        <div class="container">
            <!-- 主页 -->
            <div v-show="core">
                <div class="nav">
                    <div>
                        <a href="javascript:;" @click="$router.back()"></a>
                    </div>
                    <div>
                        <span>投诉中心</span>
                    </div>
                    <div @click="subnav = !subnav">
                        <i>&nbsp;&nbsp;&nbsp;&nbsp;</i>
                        <div class="subnav" v-show="subnav" >
                            <router-link to="/" tag="a">首页</router-link>
                            <router-link to="/news" tag="a">资讯</router-link>
                            <router-link to="/video" tag="a">视频</router-link>
                            <router-link to="/seek" tag="a">找车</router-link>
                            <router-link to="/plaint" tag="a">汽车投诉</router-link>
                        </div>
                    </div>
                </div>
                <div class="tosu_step">
                    <div class="fir">
                        <em>1</em>
                        <span>投诉内容</span>
                    </div>
                    <div class="step_dashed"></div>
                    <div class="fir">
                        <em>2</em>
                        <span>车辆信息</span>
                    </div>
                </div>
                <div class="tosu_body">
                    <ul>
                        <li>
                            <div>
                                <div class="hd">行驶里程</div>
                                <div class="bd">
                                    <input type="number" pattern="[0-9]*" placeholder="请填写行驶里程">
                                    Km
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="hd">车牌号</div>
                                <div class="bd">
                                    <select id="carNumHead" class="select-auto-record">
                                        <option value="京">京</option>
                                        <option value="沪">沪</option>
                                        <option value="浙">浙</option>
                                        <option value="苏">苏</option>
                                        <option value="津">津</option>
                                        <option value="冀">冀</option>
                                        <option value="晋">晋</option>
                                        <option value="蒙">蒙</option>
                                        <option value="辽">辽</option>
                                        <option value="吉">吉</option>
                                        <option value="黑">黑</option>
                                        <option value="皖">皖</option>
                                        <option value="闽">闽</option>
                                        <option value="赣">赣</option>
                                        <option value="鲁">鲁</option>
                                        <option value="豫">豫</option>
                                        <option value="鄂">鄂</option>
                                        <option value="湘">湘</option>
                                        <option value="粤">粤</option>
                                        <option value="桂">桂</option>
                                        <option value="琼">琼</option>
                                        <option value="渝">渝</option>
                                        <option value="川">川</option>
                                        <option value="贵">贵</option>
                                        <option value="云">云</option>
                                        <option value="藏">藏</option>
                                        <option value="陕">陕</option>
                                        <option value="甘">甘</option>
                                        <option value="青">青</option>
                                        <option value="宁">宁</option>
                                        <option value="新">新</option>
                                        <option value="港">港</option>
                                        <option value="澳">澳</option>
                                        <option value="台">台</option>
                                    </select>
                                    <input type="text" placeholder="请填写车牌号" class="small">
                                    <!-- <label @click.prevent="barche">
                                        <input checked="bar">
                                        <span :class="bar?'bar':''"></span>
                                        无车牌
                                    </label> -->
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="hd">车架号</div>
                                <div class="bd">
                                    <input type="number" pattern="[0-9]*" placeholder="17位车架号(VIN号)">
                                   
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="hd">购买时间</div>
                                <div class="bd" @click="timeTab = true">
                                    <input type="number" pattern="[0-9]*" placeholder="请填写购买时间" v-show="!aa">
                                   <span v-show="aa">{{currentDate | current}}</span>
                                </div>
                            </div>
                            
                        </li>
                        <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
                            @confirm="confirm" @cancel="cancel" v-show="timeTab" />
                        <li>
                            <div>
                                <div class="hd">购车城市</div>
                                <div class="bd">
                                    <input type="text" pattern="[0-9]*" placeholder="请填写购买城市">
                                    
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="hd">经销商</div>
                                <div class="bd">
                                    <input type="text" pattern="[0-9]*" placeholder="请填写经销商名称">
                                    
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="hd">经销商电话</div>
                                <div class="bd">
                                    <input type="text" pattern="[0-9]*" placeholder="经销商电话">
                                    
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
               
                <div class="next">
                    <router-link to="/last" tag="span">提交</router-link>
                </div>
                <div class="cross"></div>
                <div class="footer">
                    <p>您的投诉建议</p>
                    <p>Copyright©2019 汽车消费网 315che.com</p>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            core: true,
            bar:true,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(2021, 0, 17),
            timeTab:false,
            aa:false,
            subnav:false
        }
    },
    created() {
        this.$emit("car-show", false);
    },
    methods:{
        barche(){
            this.bar = !this.bar
        },
        confirm(){
            this.timeTab = false;
            this.aa = true
        },
        cancel(){
            this.timeTab = false
        },
        
    },
    filters:{
        current:function(val){
            let y = val.getFullYear();
            let m = val.getMonth() + 1;
            let d = val.getDate();
            return y + "-" + m + "-" + d
        }
    }

}
</script>

<style lang="scss" scoped>
input::placeholder {
    color: #999;
}
.nav {
    height: 44px;
    background-color: #2070e0;
    display: flex;
    align-items: center;

    &>div {
        &:nth-child(1) {
            text-align: left;
            flex: 1;
        }

        &:nth-child(2) {
            text-align: center;
            flex: 1;
        }

        &:nth-child(3) {
            text-align: right;
            position: relative;
            flex: 1;
            .subnav{
                width: 100px;
                height: 170px;
                padding: 6px;
                border-radius: 4px;
                position: absolute;
                top: 35px;
                left: 12px;
                background: rgba(0, 0, 0, 0.8);
                z-index: 9;
                a{
                    width: 100px;
                    height: 18px;
                    padding: 8px 0;
                    text-align: center;
                    background-image: none;
                    color: #fff;
                }
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    top: -17px;
                    left: 80px;
                    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
                    border-width: 9px;
                    border-style: dashed dashed solid dashed;
                }
            }
        }
    }

    div {
        a {
            display: block;
            width: 40px;
            height: 40px;
            background-image: url("../assets/img/icons1.png");
            background-position: -82px -32px;
            background-size: 400px auto;
        }

        span {
            color: #fff;
            font-size: 16px;
        }

        i {
            width: 15px;
            height: 18px;
            background-image: url("../assets/img/m-icons.png");
            background-position: -211px 0px;
            background-size: 300px auto;
            margin-right: 15px;
        }
    }
}

.brand {
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .content {
        p {
            height: 16px;
            padding: 12px 10px;
            color: #333;
            font-size: 16px;
        }
    }
}

.tosuObj {
    .nav {
        div {
            i {
                width: 48px;
                height: 27px;
                line-height: 27px;
                display: block;
                background-image: none;
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -13px;
                font-style: normal;
                color: #2070e0;
                background-color: #fff;
                text-align: center;
                font-size: 12px;
                border-radius: 4px;
            }
        }
    }

    .content {
        p {
            height: 16px;
            padding: 15px 20px;
            color: #333;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
                display: block;
            }
        }

        .correct::after {
            content: "";
            width: 11px;
            height: 10px;
            display: block;
            background-image: url('../assets/img/m-icons.png');
            background-size: 252px auto;
            background-position: -87px -46px;
        }
    }
}

.tosu_step {
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
        position: relative;

        em {
            display: block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            font-style: normal;
            text-align: center;
            line-height: 18px;
            position: absolute;
            font-size: 13px;
            color: #fff;
        }

        span {
            font-size: 14px;
            padding-left: 22px;
        }
    }

    .step_dashed {
        width: 50px;
        border-top: 2px dashed #2070e0;
        margin: 0 6px;
    }

    .fir {
        em {
            background-color: #2070e0;
        }

        span {
            color: #2070e0;
        }
    }

    .sec {
        em {
            background-color: #ccc;
        }

        span {
            color: #ccc;
        }
    }
}

.next {
    padding: 30px 20px;

    span {
        display: block;
        width: 100%;
        background-color: #2070e0;
        border-radius: 20px;
        font-size: 18px;
        text-align: center;
        line-height: 45px;
        height: 45px;
        color: #fff;
    }
}

.tosu_body{
    padding: 0 20px;
    ul{
        li{
            padding: 15px 0;
            border-bottom: 1px solid #e6e6e6;
            &>div{
                display: flex;
                color: #333;
                font-size: 16px;
                justify-content: space-between;
               .hd{
               }
               .bd{
                display: flex;
                    input{
                        margin-right: 5px;
                        border: 0px;
                        text-align: right;
                    }
                    select{
                        width: 50px;
                        height: 20px;
                        background-image: url('../assets/img/icon-auto-record.png');
                        background-size: 9px;
                        background-position: center left;
                        background-repeat: no-repeat;
                        -webkit-appearance: none;
                        border: 0px;
                        padding-left: 25px;
                    }
                    label{
                        display: flex;
                        input{
                            display: none;

                        }
                        span{
                            width: 17px;
                            height: 17px;
                            border-radius: 50%;
                            border: 1px solid #cdcdcd;
                        }
                        .bar{
                            &::after{
                                content: "";
                                width: 11px;
                                height: 10px;
                                display: block;
                                background-image: url('../assets/img/m-icons.png');
                                background-size: 252px auto;
                                background-position: -87px -46px;
                                margin: 1px 0 0 3px;
                            }
                        }
                    }
                    .small{
                        width: 95px;
                    }
               }
            }
        }
    }
}


.footer {
    height: 44px;
    padding: 25px 20px;
    padding-bottom: 75px;

    p {
        color: #333;
        font-size: 14px;
        text-align: center;

        &:first-of-type {
            padding-bottom: 10px;

            &::before {
                display: inline-block;
                width: 18px;
                height: 14px;
                content: "";
                background-image: url("../assets/img/m-icons.png");
                background-position: -601px 0px;
                background-size: 230px auto;
                margin-right: 3px;
            }
        }
    }
}
</style>